<template>
  <div class="tenantMenu_main main_container user_containerAddOrUpdate_main add_container">
    <div style="margin:0" class="main_main">
      <div style="padding-right:20px" class="SearchBar_main main_main_search">
        <div style="padding-left:20px" class="main_main_search_item">
          <div class="formItem_header">
            <div class="formItem_header_operate" />
          </div>
        </div>
        <div class="main_main_search_item">
          <el-input v-model="pageData.searchValue" placeholder="请输入物料编码或名称" clearable @keyup.enter.native="search" @clear="getList" />
          <el-button icon="el-icon-search" @click.stop="search" />
        </div>
      </div>
      <div ref="table_container" class="table_container">
        <el-table
          ref="table"
          :data="tableData"
          :row-class-name="tableRowClass"
          :height="tableHeight"
          :cell-style="cellStyle"
          stripe
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @sort-change="(column)=>{sortChange(column, this)}"
          @selection-change="(val)=>{selectionChange(val, this)}"
        >
          <el-table-column type="selection" align="center" :selectable="tableSelectable" />
          <Column v-for="(column,index) in defaultTableColumns" :key="index" :prop="column.prop" :is-show="column.isShow" :label="column.label" :sortable="column.sortable" :width="column.width" :min-width="column.minWidth" />
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getInfoForReturn as getTaskInfo } from '@/api/ProductionManagement/pickingList'
import AddOrUpdate from '../../warehouseManagement/materialInfo/addOrUpdate.vue' // 新增或编辑页面
export default {
  name: 'Index',
  props: {
    layerid: {},
    typeId: {},
    selectedRow: {},
    id: {}
  },
  data() {
    return {
      pageData: {
        pageNum: 1,
        pageSize: 20,
        status: 1,
        searchValue: ''
      },
      defaultTableColumns: [// 表格常规字段（初始值）
        { prop: 'materialCode', label: '物料编码', minWidth: '120' },
        { prop: 'materialName', label: '物料名称', minWidth: '120' },
        { prop: 'materialModel', label: '规格型号', minWidth: '100' },
        { prop: 'materialUnitName', label: '物料单位', minWidth: '100' },
        { prop: 'number', label: '可退数量', minWidth: '100' },
        { prop: 'materialTypeName', label: '物料分类', minWidth: '100' }
        // { prop: 'remark', label: '备注', minWidth: '200' }
      ],
      seachDate: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        searchValue: '',
        status: 1
      },
      showMaterialName: false,
      typeCodeId: '',
      total: 1, // 数据一共有多少条
      mainId: 'materialId',
      tableHeight: '0',
      tableData: [], // 表格数据
      tableData2: [],
      tableDataOne: [],
      selections: [], // 表格当前页所选中的行
      selectionsAll: [] // 表格所有页选中的行
    }
  },
  computed: {
    // 分页器
    selectedNum() {
      return this.$refs.table ? this.$refs.table.selection.length : 0
    }
  },
  watch: {
    'seachDate.searchValue'() {
      if (this.seachDate.searchValue == '' || this.seachDate.searchValue == null) {
        this.getList()
      }
    }
  },
  mounted() {
    this.getList()
    this.selectionsAll = this.selectedRow
  },
  methods: {
    rowClick(row) {
      if (row.stockNum !== '0') {
        this.$refs.table.toggleRowSelection(row)
      }
    },
    cellStyle({ row, column }) {
      if (column.property == 'stockNum') {
        if (row.stockNum == '0') {
          return {
            color: '#E86D7C'
          }
        }
      }
    },
    tableSelectable(row, index) {
      if (row.stockNum == '0') {
        return false
      } else {
        return true
      }
    },
    getList() {
      getTaskInfo(this.id).then(res => {
        this.tableData2 = this.$deepClone(res.data.rawMaterialPoolListVos)
        const data2 = this.$deepClone(res.data.rawMaterialPoolListVos)
        this.tableData = data2
        this.$nextTick(() => {
          this.setSelectRow(this)// 设置行选中
          this.tableHeight = this.$refs.table_container.offsetHeight
        })
      })
    },
    search() {
      this.tableDataOne = this.tableData2.filter(item => item.materialCode.indexOf(this.pageData.searchValue) !== -1 || item.materialName.indexOf(this.pageData.searchValue) !== -1)
      this.tableData = this.tableDataOne
      this.$nextTick(() => {
        this.setSelectRow(this)// 设置行选中
      })
    },
    refresh() {
      this.pageData.pageNum = 1
      this.getList()
    },
    tableRowClass({ row }) {
      if (row.id == this.typeCodeId) {
        return 'rowSelected'
      }
      return ''
    },
    add() {
      this.$layer.iframe({// 弹框
        content: {
          content: AddOrUpdate, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['880px', '700px'],
        title: '新增添加物料', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    onSubmit(row) { // 单击行选中
      this.$parent.chooseMaterialCallBack(this.selectionsAll)
      this.$layer.close(this.layerid) // 关闭弹框
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    }

  }
}
</script>

<style lang="less" scoped>
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(56, 123, 252, 0.5) !important;
  color: #ffffff;
}
.main_main{
  margin: 0 !important;
  height: calc(100% - 50px);
  padding-top:0 !important;
}
.main_main_search_item{
  .el-input{
    width:230px !important;
    margin-right:10px !important;
  }
  .el-button{
    background:#387bfc !important;
    width:30px !important;
  }
}
.addtype-main_bottom{
  padding-right: 20px !important;
  margin: 10px 0;
}
.formItem_header_operate_items{
  height: 30px;
  display: flex;justify-content: center;align-items: center;
  padding: 0px 10px;font-size: 16px;border-radius: 4px;
  color: rgba(56, 123, 252, 1);background-color: rgba(235, 242, 255, 1);
  margin-left: 10px !important;
  .item_name{
    font-size: 14px;padding-left: 10px;
  }
}
.formItem_header_operate_items:hover{
  background-color: rgba(235, 242, 255, 0.5);
}
.MaterialName {
  display: flex;
  color:rgb(244,156,31);
  justify-content: flex-end;
  align-items: center;
  font-size: 16px;
  padding-top: 20px;
  padding-left: 19px;
  .MaterialNameIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1px    ;
    padding-left: 2px;
    padding-right: 5px;
  }
}
</style>
